<template>
  <div>
    <div class="tab-ber-bottom" @click.stop></div>
    <div class="tab-ber" @click.stop>
      <div class="tab-ber-once" @click="tocurrent(0)" :class="{fontColor: currentTab === 0}">
        <i class="iconfont icon-guandianfenxi1"></i><br/>
        <span>大咖观点</span>
      </div>
      <div class="tab-ber-once" @click="tocurrent(1)" :class="{fontColor: currentTab === 1}">
        <i class="iconfont icon-open-book1"></i><br/>
        <span>近期课程</span>
      </div>
      <div class="tab-ber-once" @click="tocurrent(2)" :class="{fontColor: currentTab === 2}">
        <i class="iconfont icon-xuqiu1"></i><br/>
        <span>课程需求</span>
      </div>
      <div class="tab-ber-once" @click="tocurrent(3)" :class="{fontColor: currentTab === 3}">
        <i class="iconfont icon-gerenzhongxin1"></i><br/>
        <span>个人中心</span>
      </div>
    </div>
  </div>
</template>

<script>
import store from '../../store'
export default {
  name: 'tab-ber',
  store,
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      currentTab: 0,
      isBtn: false,
      selected: '',
      isServer: false,
      currentpath: [
        '/',
        '/',
        '/needs/index',
        '/users/index'
      ]
    }
  },
  mounted () {
    this.currentTab = parseInt(this.current)
    this.$store.dispatch('getAuth')
  },
  methods: {
    tocurrent (num) {
      this.currentTab = num
      this.$router.push(this.currentpath[this.currentTab])
    }
  }
}
</script>

<style lang="scss" scoped>
  .tab-ber-bottom {
    height: 48px;
  }
  .tab-ber {
    height: 48px;
    border-top:1px solid #eee;
    background:#ffffff;
    color:#b5b5b5;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    .tab-ber-once {
      width: 25%;
      height: 48px;
      float: left;
      text-align: center;
      box-sizing: border-box;
      i{
        padding-left: 40%;
        display: inline-block;
        margin-top: 5px;
      }
      span {
        font-size: 12px;
      }
    }
    .fontColor {
      color: #0033a0;
    }
  }
</style>
